<template>
 <el-menu
  default-active="/hospital"
  class="el-menu-vertical-demo"
  @open="handleOpen"
  @close="handleClose"
  ellipsis
  unique-opened
  router
 >
  <template
   v-for="item in routes.filter((v) => v.path !== '/' && v.path !== '/login')"
   :key="item.path"
  >
   <el-sub-menu v-if="item.children.length > 1" :index="item.path">
    <template #title>
     <el-icon><IconMenu /></el-icon>
     <span>{{ item.meta.title }}</span>
    </template>
    <el-menu-item-group>
     <template v-for="chil in item.children" :key="chil.path">
      <el-menu-item :index="chil.path">{{ chil.meta.title }}</el-menu-item>
     </template>
    </el-menu-item-group>
   </el-sub-menu>
   <el-sub-menu v-else>
    <template #title>
     <el-icon><IconMenu /></el-icon>
     <span>{{ item.meta.title }}</span>
    </template>
    <el-menu-item-group>
     <template v-for="chil in item.children" :key="chil.path">
      <el-menu-item :index="chil.path">{{ chil.meta.title }}</el-menu-item>
     </template>
    </el-menu-item-group>
   </el-sub-menu>
  </template>
 </el-menu>
</template>

<script setup>
import { Menu as IconMenu } from '@element-plus/icons-vue'
import { routes } from '../router/index'

console.log(routes.filter((v) => v.path !== '/' && v.path !== '/login'))
const handleOpen = (key, keyPath) => {
 console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
 console.log(key, keyPath)
}
</script>
<style lang="scss" scoped>
.el-menu {
 height: calc(100vh - 100px);
 overflow-y: scroll;
}
.el-menu::-webkit-scrollbar {
 overflow-y: scroll;
}
</style>
